<style lang="less" scoped>
@import "./main.less";
</style>
<template>
  <div>
      <Row>
            <Col span="24">
                <Card>
                    <div>
                      <Form :model="userFrom" inline>
                        <FormItem prop="user">
                            <Input type="text" v-model="userFrom.user" placeholder="用户名称">
                                <Icon type="ios-person-outline" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                        <FormItem prop="audit">
                          <Select v-model="userFrom.audit">
                            <Option :value="0" >未认证</Option>
                            <Option :value="1" >未审核</Option>
                            <Option :value="2" >已审核</Option>
                          </Select>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="search()">Search</Button>
                        </FormItem>
                    </Form>
                    </div>
                    <div>
                            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
                    </div>
                    <div class="margin-top-15" style="text-align: center">
                            <Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal v-model="captialShow.show" :style="{top :'30px'}" :width="960" :label-with="80">
          <p slot="header" style="color:#2d8cf0;">
                <Icon type="information-circled"></Icon>
                <span>用户资产变更记录</span>
            </p>
            <div>
                <Table :columns="captialColumns" :data="captialData" border disabled-hover></Table>
            </div>
            <div class="margin-top-15" style="text-align: center">
                <Page :total="captialShow.count" :current="captialShow.page"
                      :page-size="captialShow.size" @on-change="changeCaptialPage"
                      @on-page-size-change="changeCaptialSize" show-elevator show-sizer show-total></Page>
            </div>
            <p slot="footer"></p>
        </Modal>
        <Modal v-model="img.show" :style="{top:'30px'}" :width="560">
          <div class="img-list" v-for="item in img.list">
            <img :src="item">
          </div>
          <div>
            身份证：{{img.card}}
          </div>
          <div slot="footer">
            <template v-if="img.showButton">
              <Button type="error" v-on:click="refuse">不通过审核</Button>
              <Button type="primary" v-on:click="agree">通过审核</Button>
            </template>
          </div>
        </Modal>
  </div>
</template>
<script>
const captial = (vm, h, currentRow, index) => {
  return h(
    "Button",
    {
      props: {
        type: "primary"
      },
      style: {
        margin: "0 5px"
      },
      on: {
        click: () => {
          vm.captialShow.show = true;
          vm.captialShow.gid = currentRow.id;
          vm.getCaptialList();
        }
      }
    },
    "用户资产变更记录"
  );
};
const editButton = (vm, h, currentRow, index) => {
  return h(
    "Button",
    {
      props: {
        type: "primary"
      },
      style: {
        margin: "0 5px"
      },
      on: {
        click: () => {
          {
            vm.formItem.id = currentRow.id;
            // vm.formItem.name = currentRow.name;
            // vm.formItem.rule_set = currentRow.rule_set;
            // vm.formItem.title = currentRow.title;
            vm.modalSetting.show = true;
            vm.modalSetting.index = index;
          }
        }
      }
    },
    "编辑"
  );
};
const deleteButton = (vm, h, currentRow, index) => {
  return h(
    "Poptip",
    {
      props: {
        confirm: true,
        title: "您确定要删除这条数据吗? ",
        transfer: true
      },
      on: {
        "on-ok": () => {
          axios.delete(resourse + currentRow.id).then(function(response) {
            currentRow.loading = false;
            if (response.data.code === 200) {
              vm.tableData.splice(index, 1);
              vm.$Message.success(response.data.msg);
            } else {
              if (response.data.code === 403) {
                vm.$store.commit("logout", this);
                vm.$router.push({
                  name: "login"
                });
              } else {
                vm.$Message.error(response.data.msg);
              }
            }
          });
        }
      }
    },
    [
      h(
        "Button",
        {
          style: {
            margin: "0 5px"
          },
          props: {
            type: "error",
            placement: "top",
            loading: currentRow.isDeleting
          }
        },
        "删除"
      )
    ]
  );
};
const resourse = "users";
import axios from "axios";
export default {
  data() {
    return {
      columnsList: [
        {
          title: "序号",
          type: "index",
          align: "center"
        },
        {
          title: "标题用户名",
          key: "name",
          align: "center"
        },
        {
          title: "真实姓名",
          key: "real_name",
          align: "center"
        },
        {
          title: "性别",
          key: "sex",
          align: "center"
        },
        {
          title: "城市",
          key: "city",
          align: "center"
        },
        {
          title: "账户余额",
          key: "balance",
          align: "center"
        },
        {
          title: "冻结金额",
          key: "freeze",
          align: "center"
        },
        {
          title: "认证",
          key: "authentication",
          align: "center",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: params.row.authentication == 1 ? "warning" : params.row.authentication==2?'primary':'error',
                  disabled: params.row.authentication == 1 ? false : params.row.authentication==2?false:true,
                  shape: "circle"
                },
                style: {
                  margin: "0 5px"
                },
                on:{
                  'click':(e)=>{
                    // console.log(params);
                    this.img.show=true
                    this.img.list = []
                    this.img.list.push(params.row.card_img_front)
                    this.img.list.push(params.row.card_img_back)
                    this.img.id = params.row.id
                    this.img.card = params.row.card
                    this.img.showButton = params.row.authentication == 1 ?true:false
                  }
                }
              },
              params.row.authentication == 1 ? "等待审核" : params.row.authentication==2?'已审核':'未认证',
            );
          }
        },
        {
          title: "成员授权",
          align: "center",
          key: "member",
          handle: ["member"]
        }
        // {
        //   title: "操作",
        //   align: "center",
        //   key: "handle",
        //   width: 175,
        //   handle: ["edit", "delete"]
        // }
      ],
      tableData: [],
      tableShow: {
        listCount: 0,
        currentPage: 1,
        pageSize: 10
      },
      captialColumns: [
        {
          title: "序号",
          type: "index",
          align: "center"
        },
        {
          title: "类型",
          key: "type",
          align: "center"
        },
        {
          title: "金额",
          key: "money",
          align: "center"
        },
        {
          title: "原金额",
          key: "old_money",
          align: "center"
        },
        {
          title: "余额",
          key: "new_money",
          align: "center"
        },
        {
          title: "冻结金额",
          key: "freeze",
          align: "center"
        }
      ],
      captialData: [],
      captialShow: {
        show: false,
        count: 0,
        size: 10,
        page: 1
      },
      userFrom: {
        user: "",
        audit:0
      },
      img:{
        list:[],
        card:'',
        id:'',
        show:false,
        showButton:false
      }
    };
  },
  created() {
    // console.log(this.$route.query.status);
    let status = this.$route.query.status;
    
    if(status!=undefined){
      this.userFrom.audit = status
    }
    this.init();
    this.getList();
  },
  mounted(){
    
  },
  methods: {
    init() {
      this.columnsList.forEach(item => {
        if (item.key === "member") {
          item.render = (h, param) => {
            let currentRowData = this.tableData[param.index];
            return h("div", [captial(this, h, currentRowData, param.index)]);
          };
        }
      });
    },
    alertAdd() {
      this.modalSetting.show = true;
    },
    changePage(page) {
      this.tableShow.currentPage = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.pageSize = size;
      this.getList();
    },
    doCancel(data) {
      if (!data) {
        this.formItem.id = 0;
        this.$refs["myForm"].resetFields();
        this.modalSetting.loading = false;
        this.modalSetting.index = 0;
      }
    },
    cancel() {
      this.modalSetting.show = false;
    },
    submit() {
      this.$refs["myForm"].validate(validate => {
        if (validate) {
          this.modalSetting.loading = true;
          if (this.formItem.ruleId === 0) {
            axios.post(resourse, this.formItem).then(response => {
              responseHandle(response);
            });
          } else {
            axios
              .put(resourse + this.formItem.ruleId, this.formItem)
              .then(response => {
                responseHandle(response);
              });
          }
          this.getRules();
          this.cancel();
        }
      });
    },
    getList() {
      axios.get(resourse,{params:{page:this.tableShow.currentPage,size:this.tableShow.pageSize,user:this.userFrom.user,audit:this.userFrom.audit}}).then(response => {
        this.responseHandle(response);
      });
    },
    responseHandle(response) {
      let res = response.data;
      if (res.code === 200) {
        this.tableData = res.data.list;
        this.tableShow.listCount=res.data.count
      } else {
        if (res.code === 403) {
          this.$store.commit("logout", this);
          this.$router.push({
            name: "login"
          });
        } else {
          this.$Message.error(res.msg);
        }
      }
    },
    changeCaptialSize(size) {
      this.captialShow.size = size
      this.getCaptialList()
    },
    changeCaptialPage(page) {
      this.captialShow.page = page
      this.getCaptialList()
    },
    getCaptialList(){
      axios.get('capital/'+this.captialShow.gid,{params:{type:0,size:this.captialShow.size,page:this.captialShow.page}}).then(response=>{
        let res = response.data
        if(res.code === 200){
          this.captialData = res.data.list
          this.captialShow.count = res.data.count
        }else{
          if(res.code===403){
            this.$store.commit("logout", this);
            this.$router.push({
              name: "login"
            });
          }else{
            this.$Message.error(res.msg)
          }
        }
      })
    },
    alertInfo(param,e){
      console.log(param);
      
    },
    refuse(){
      this.common(0)
    },
    agree(){
      this.common(1);
    },
    common(status){
       axios.post('user/audit/'+this.img.id,{status:status}).then(response=>{
        this.img.show = false
        let res = response.data
        if(res.code === 200){
          this.$Message.success(res.msg)
        }else{
          if(res.code === 403){
            this.$store.commit("logout", this);
            this.$router.push({
              name: "login"
            });
          }else{
            this.$Message.error(res.msg)
          }
        }
        this.getList();
      })
    },
    search(){
      this.tableShow.currentPage = 1
      this.getList();
    }
  }
};
</script>

